
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>开始使用 layui</title>
        <link rel="stylesheet" href="./layui/css/layui.css">

        <style>

            #registDiv {
                margin: 100px auto;
                width: 500px;
                /*border: solid 1px #59c4e3;*/
                box-shadow: 0 0 9px 12px greenyellow;
                background-color: aquamarine;
                border-radius: 50px;
            }

            .layui-input {
                border-radius: 10px;
            }

            .layui-btn-normal {
                border-radius: 10px;
            }

        </style>

    </head>
    <body>
    <div id="registDiv">
        <!-- 你的 HTML 代码 -->
        <h3 style=" text-align: center; margin-bottom: 20px;margin-top: 10px;"> 注册用户 </h3>
        <form id="registForm" class="layui-form" action="" lay-filter="example" enctype="multipart/form-data">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" id="username" name="username" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                    <label id="usernameReturnData"></label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码框</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">单选框</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="1" title="男" checked="">
                    <input type="radio" name="sex" value="2" title="女">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">生日</label>
                    <div class="layui-input-inline">
                        <input type="text" name="birthday" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">文件上传</label>
                    <div class="layui-input-inline">
                        <input type="file" name="photopath" class="layui-btn layui-btn-normal">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-inline">
                    <input type="text" name="capchar" autocomplete="off" placeholder="请输入验证码" class="layui-input">
                </div>
                <img id="cap" src="/user/getCaptcha" style="height: 38px;width: 120px;">
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>


    <script src="./layui/layui.js"></script>
    <script>
        // 加载layui的指定 模块
        layui.use(function(){
            // layui js 代码开始的位置

            var layer = layui.layer
                ,form = layui.form,
                $=layui.$;
            var laydate = layui.laydate;

            // layer.msg('Hello World');

            //鼠标失去焦点事件
            //     $("#username").blur(function () {
            //         var username = $(this).val();
            //         $.ajax({
            //             url:'/user/checkusername?username='+username,
            //             type:'get',
            //             success:function(ret) {
            //                 if (ret.code=="1") {
            //                     layer.tips('用户名已存在', 'username', {
            //                         tips: [3, '#FFB800'],
            //                         time: 6000,
            //                     });
            //                 }
            //             },error:function (ret) {
            //                 console.log(ret);
            //             }});
            //     });


            $("#username").blur(function () {
                $("#usernameReturnData").removeClass("layui-font-green")
                $("#usernameReturnData").removeClass("layui-font-red")

                username = $("#username").val();
                console.log(username);
                $.ajax({
                    url:'/user/checkusername?username='+username,
                    type:'get',
                    success:function(ret){
                        console.log(ret);
                        if(ret.code===1){ // 用户名重复校验成功（不重复）
                            $("#usernameReturnData").text("该用户名可以使用√").addClass("layui-font-green");
                        } else {
                            $("#usernameReturnData").text("该用户名不可以使用×").addClass("layui-font-red");
                        }
                    },
                    error:function (ret) {
                        console.log(ret);
                    }}
                );
            });

            //日期
            laydate.render({
                elem: '#date'
            });

            //监听提交
            form.on('submit(demo1)', function(data){
                // debugger  // 实现浏览器调试断点
                // console.log(data.field);
                // layer.alert(JSON.stringify(data.field), {
                //     title: '最终的提交信息'
                // });

                // 获取包含了上午文件的表单的所有信息
                var formDate = new FormData(document.getElementById("registForm"));

                // 发送ajax请求
                $.ajax({
                    url:'/user/regist',
                    type:'post',
                    data:formDate,
                    processData:false,
                    contentType:false,
                    success:function(ret){
                        console.log(ret);

                        if(ret.code=="1"){ // 登录成功
                            layer.msg(ret.msg);
                            window.location="/login.html";
                        }
                    },
                    error:function (ret) {
                        console.log(ret);
                    }
                });

                return false; // 取消表单的默认提交行为
            });


            // 处理验证码单击更改图片内容
            $("#cap").click(function(){
                //刷新验证码
                path = "/user/getCaptcha"+"?"+new Date().getTime();
                $(this).attr("src",path);
            });



            // 添加表单验证规则
            //自定义验证规则
            form.verify({
                title: function(value){
                    if(value.length < 4){
                        return '用户名至少得5个字符啊';
                    }
                }
                ,pass: [
                    /^[\S]{6,12}$/
                    ,'密码必须6到12位，且不能出现空格'
                ]
            });


            // layui js 代码结束的位置
        });
    </script>


    </body>
    </html>
